<template>
  <base-modal
    :show.sync="visible"
    @close="close"
    width="600px"
    class="propaganda-page-modal">
    <div class="propaganda-page-content">
      <p class="propaganda-page-content-title">{{ propagandaData.title}}</p>
      <img :src="propagandaData.url" />
      <p class="contact" @click="showChatModal">{{$t('common.guide.systemIntegration.contactService')}}</p>
    </div>
  </base-modal>
</template>
<script>
import { defineComponent, ref, watch, watchEffect, computed } from 'vue';
import { saveValueAddedClue } from '@src/api/Clue'
import { postPage, getRootWindow } from 'pub-bbx-utils'
import { t } from '@src/locales'

export default defineComponent({
  name: 'propaganda-page-model',
  props: {
    propagandaData: {
      type: Object,
      default: () => ({})
    },
  },
  setup(props, { emit }) {
    // 是否显示
    const visible = ref(false);
    // 专属在线客服灰度
    const isHasExclusiveCsIM = computed(() => {
        const rootWindow = getRootWindow(window);
        return rootWindow?.grayAuth?.exclusiveCsIM
    });
    /*** 关闭弹窗 */
    function close() {
        visible.value = false;
    }
    /*** 打开弹窗 */
     function open() {
      visible.value = true;
    }
    /*** 唤起在线客服弹窗 */
    function showChatModal() {
      const type = props.propagandaData.type;
      if(!sessionStorage.getItem(`clueType${type}`)){
        sessionStorage.setItem(`clueType${type}`, 'true')
        saveValueAddedClue({ type: type})
      }
      if(isHasExclusiveCsIM.value) {
          close();
          postPage({
            action: 'shb.system.openChat',
            data: {},
          })
      }else {
          platform.alert(t('component.imApplyVideoModal.applySuccessTip'))
      }
        
    }
    return {
        visible,
        isHasExclusiveCsIM,
        close,
        open,
        showChatModal,

    }
  }
})
</script>
<style lang="scss" scoped>
  .propaganda-page-modal {
    ::v-deep .base-modal {
      background: linear-gradient(180deg, #85d3dc 0%, #6ae4e0 100%);
      .base-modal-header {
        justify-content: flex-end;
        background: none;
        min-height: 30px;
        padding: 0px 15px 0px 20px;
        .base-modal-header-close {
          color: #fff;
        }
      }
    }
  }
  .propaganda-page-content {
    text-align: center;
    &-title {
      font-family: HarmonyOS Sans SC;
      font-size: 20px;
      font-weight: bold;
      line-height: 28px;
      text-align: center;
      margin-bottom: 0;
      color: #ffffff;
      text-shadow: 0px 1px 3px  rgba(0, 0, 0, 0.3);
    }
    img {
      width: 100%;
    }
    .contact {
      display: inline-block;
      margin: 16px auto;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      padding: 0 12px;
      background: #fff;
      color: $text-color-regular;
      cursor: pointer;
      &:hover {
        color: $color-primary;
      }
    }
  }
</style>
